<template>
  <div>
    <div class="key-select-bg"
         v-show="isResourceShow"
         @click="isResourceShowFn"></div>
    <div class="select-input-checkbox"
         @click="isResourceShowFn">
      {{resourceText}}
    </div>
    <div class="select-resource-body" v-show="isResourceShow">
      <ul>
        <li
          v-for="item in resourceList" :key="item.dicKey"
          :class="[{active: item.isChecked},{now: selectedNow == item.dicKey}]"
          @click="activeResourceFn(item)"
          class="ps-rel"
          :dicKey="item.dicKey">
          <input v-show="false" :checked="item.isChecked"  type="checkbox">
          {{ item.dicValue }}
        </li>
      </ul>
      <div class="select-key-detial">
        <ul v-show="oneSelectedObj.length != 0">
          <li v-for="item in oneSelectedObj.childDicInfoList" :key="item.dicKey"
          class="">
            <label class="checkbox-label">
              <input
                class="input_agreement_protocol"
                type="checkbox"
                :checked="item.isChecked"
                @click="checkedOne(item)"/>
              <span></span>
              <span class="checkbox-text" v-text="item.dicValue"></span>
            </label></li>
        </ul>
        <div v-show="oneSelectedObj.length == 0">{{promptMessage}}</div>
      </div>
    </div>
  </div>
</template>

<script>
const g_resourceText = '未选择关键词'
export default {
  name: 'keySelect',
  data () {
    return {
      type: 13, // 接口所需类型数据
      activeResourceList: [], // 步骤列表
      isResourceShow: false,
      resourceList: [], // 物资列表
      oneSelectedObj: {}, // 最后选中的一个选项
      checkDicKeys: [], // 点击数据存放
      resourceText: g_resourceText,
      selectedNow: ''
    }
  },
  computed: {
    // 选择物资显示集合
    // 关键词下拉的提示文字
    promptMessage () {
      if (this.resourceList.length == 0) {
        return '数据为空，请联系相关人员！'
      } else {
        return '请先选择左侧分类！'
      }
    }
  },
  mounted () {
    // 预案物资
    this.getCaseResourceData()
  },
  methods: {
    // 预案物资列表
    getCaseResourceData () {
      let test = true
      if (test) {
        let data = []
        let sourceList = [
          {
            'dicKey': '1',
            'dicValue': '涉警',
            'dicType': 13,
            'dicSort': 1,
            'childDicInfoList': [
              {
                'dicKey': '1-1',
                'dicValue': '不作为',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '1-2',
                'dicValue': '执法不当',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '1-3',
                'dicValue': '违法违规',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '1-4',
                'dicValue': '态度不端',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              },
              {
                'dicKey': '1-5',
                'dicValue': '其他涉警',
                'dicType': 13,
                'dicSort': 5,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '2',
            'dicValue': '涉案',
            'dicType': 13,
            'dicSort': 2,
            'childDicInfoList': [
              {
                'dicKey': '2-1',
                'dicValue': '传销',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '2-2',
                'dicValue': '黄赌毒',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '2-3',
                'dicValue': '诈骗',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '2-4',
                'dicValue': '打架斗殴',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              },
              {
                'dicKey': '2-5',
                'dicValue': '其他涉案',
                'dicType': 13,
                'dicSort': 5,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '3',
            'dicValue': '涉稳',
            'dicType': 13,
            'dicSort': 3,
            'childDicInfoList': [
              {
                'dicKey': '3-1',
                'dicValue': '业主维权',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '3-2',
                'dicValue': '讨薪',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '3-3',
                'dicValue': '拆迁',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '3-4',
                'dicValue': '非吸',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              },
              {
                'dicKey': '3-5',
                'dicValue': '教师',
                'dicType': 13,
                'dicSort': 5,
                'childDicInfoList': null
              },
              {
                'dicKey': '3-6',
                'dicValue': '其他涉稳',
                'dicType': 13,
                'dicSort': 6,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '4',
            'dicValue': '涉汉',
            'dicType': 13,
            'dicSort': 4,
            'childDicInfoList': [
              {
                'dicKey': '4-1',
                'dicValue': '热点',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '4-2',
                'dicValue': '火灾',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '4-3',
                'dicValue': '极端天气',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '4-4',
                'dicValue': '非正常死亡',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              },
              {
                'dicKey': '4-5',
                'dicValue': '其他涉汉',
                'dicType': 13,
                'dicSort': 5,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '5',
            'dicValue': '涉交通',
            'dicType': 13,
            'dicSort': 5,
            'childDicInfoList': [
              {
                'dicKey': '5-1',
                'dicValue': '违章',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '5-2',
                'dicValue': '设施',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '5-3',
                'dicValue': '事故',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '5-4',
                'dicValue': '路况',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              },
              {
                'dicKey': '5-5',
                'dicValue': '其他交通',
                'dicType': 13,
                'dicSort': 5,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '6',
            'dicValue': '涉恐',
            'dicType': 13,
            'dicSort': 6,
            'childDicInfoList': [
              {
                'dicKey': '6-1',
                'dicValue': '危爆物品',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '6-2',
                'dicValue': '暴恐事件',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '6-3',
                'dicValue': '涉恐人员',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '6-4',
                'dicValue': '其他涉恐',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '7',
            'dicValue': '涉领导人',
            'dicType': 13,
            'dicSort': 7,
            'childDicInfoList': [
              {
                'dicKey': '7-1',
                'dicValue': '省领导',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '7-2',
                'dicValue': '市领导',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              },
              {
                'dicKey': '7-3',
                'dicValue': '公安领导',
                'dicType': 13,
                'dicSort': 3,
                'childDicInfoList': null
              },
              {
                'dicKey': '7-4',
                'dicValue': '其他领导',
                'dicType': 13,
                'dicSort': 4,
                'childDicInfoList': null
              }
            ]
          },
          {
            'dicKey': '8',
            'dicValue': '涉泄密',
            'dicType': 13,
            'dicSort': 8,
            'childDicInfoList': [
              {
                'dicKey': '8-1',
                'dicValue': '泄密',
                'dicType': 13,
                'dicSort': 1,
                'childDicInfoList': null
              },
              {
                'dicKey': '8-2',
                'dicValue': '其他涉密',
                'dicType': 13,
                'dicSort': 2,
                'childDicInfoList': null
              }
            ]
          }
        ]
        sourceList.map(item => {
          let childrenData = []
          item.childDicInfoList.map(item => {
            childrenData.push({
              dicValue: item.dicValue,
              dicKey: item.dicKey,
              isChecked: false
            })
          })
          data.push({
            dicValue: item.dicValue,
            dicKey: item.dicKey,
            childDicInfoList: childrenData,
            isChecked: false
          })
        })
        this.resourceList = data
      } else {
        this.$axios({
          method: 'get',
          url: this.Monitor + '/dic/type/' + this.type
        })
          .then(res => {
            let data = []
            res.data.data.map(item => {
              let childrenData = []
              item.childDicInfoList.map(item => {
                childrenData.push({
                  dicValue: item.dicValue,
                  dicKey: item.dicKey,
                  isChecked: false
                })
              })
              data.push({
                dicValue: item.dicValue,
                dicKey: item.dicKey,
                childDicInfoList: childrenData,
                isChecked: false
              })
            })
            this.resourceList = data
            console.log(res.data.data)
          })
          .catch(err => {
            console.log(err, '***关键词下拉初始化***')
          })
      }
    },
    // 物资选择显示与隐藏
    isResourceShowFn () {
      this.isResourceShow = !this.isResourceShow
    },
    // 选择预案物资
    activeResourceFn (obj) {
      this.selectedNow = obj.dicKey
      let checkedList = []
      if (obj.childDicInfoList) {
        checkedList = obj.childDicInfoList.filter(item => {
          return item.isChecked
        })
        // 没有子项选择
        if (checkedList.length === 0) {
          if (this.selectedNow) {
            this.activeResourceList.push(obj)
          } else {
            for (let i = 0; i < this.activeResourceList.length; i++) {
              if (this.activeResourceList[i].dicKey === obj.dicKey) {
                this.activeResourceList.splice(i, 1)
              }
            }
          }
          let _length = this.activeResourceList.length
          if (_length) {
            this.oneSelectedObj = this.activeResourceList[_length - 1]
          } else {
            this.oneSelectedObj = {}
          }
        } else { // 有子项被选中不能取消,且切换过去
          this.oneSelectedObj = obj
          return false
        }
      }
      console.log(this.activeResourceList)
    },
    // 单选框事件
    checkedOne (obj) {
      obj.isChecked = !obj.isChecked
      if (obj.isChecked) {
        this.oneSelectedObj.isChecked = true
        if (this.resourceText == g_resourceText) { // 选中第一个
          this.resourceText = this.oneSelectedObj.dicValue + '/' + obj.dicValue
        } else {
          this.resourceText += ',' + this.oneSelectedObj.dicValue + '/' + obj.dicValue
        }
        console.log(this.oneSelectedObj.dicValue, obj.dicValue)
      } else {
        let _str = this.oneSelectedObj.dicValue + '/' + obj.dicValue
        let _index = this.resourceText.indexOf(this.oneSelectedObj.dicValue + '/' + obj.dicValue)
        if (_index === 0) { // 第一个
          this.resourceText = this.resourceText.replace(_str, '')
          if (this.resourceText.length === 0) { // 最后一个
            this.resourceText = g_resourceText
          } else { // 不是最后一个
            this.resourceText = this.resourceText.replace(',', '')
          }
        } else {
          this.resourceText = this.resourceText.replace(',' + _str, '')
        }
        // 改变父类的勾选状态
        let _checkedList = this.oneSelectedObj.childDicInfoList.filter(item => {
          return item.isChecked
        })
        if (_checkedList.length == 0) {
          this.oneSelectedObj.isChecked = false
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
